<template>
	<view>
		<navbar class="navbar">
			 <template v-slot:center>
			     <view class="tit">购物车({{shoppingLength}})</view>
			 </template>
		</navbar>
		<scroll-view class="scrollview" scroll-y="true" @scroll="scrollY" scroll-with-animation="true" :scroll-top="scrollTop" @scrolltolower="scrollBottom">
			<myswiper v-bind:banner="banners"></myswiper>
			<recommend v-bind:recommenddata="recommends"></recommend>
			<feature></feature>
			<tabcontrol class="tabcontrol" id="test" v-bind:active="isActive" v-bind:titles="['流行','最新','热卖']" @tabClick="tabClick" ref="tabcontrol"></tabcontrol>
			<goodslist v-bind:goodsdata="goodslistdata"></goodslist>
		</scroll-view>
		<backtop @tap="goTop" v-show="backTopShow"></backtop>
	</view>
</template>

<script>
	import navbar from '../../components/common/navbar/NavBar.vue'
	import myswiper from './childComps/HomeSwiper.vue'
	import recommend from './childComps/recommends.vue'
	import feature	from './childComps/featureview.vue'
	import goodslist from '../../components/content/goods/GoodsList.vue'
	import tabcontrol from '../../components/content/tabControl/TabControl.vue'
	import backtop from '../../components/common/backtop/BackTop.vue'
	
	import {mapState} from 'vuex'
	// import {homeRequest} from '../../network/home.js'
	export default {
		components:{
			navbar,
			myswiper,recommend,feature,
			goodslist,tabcontrol,
			backtop,
		},
		data() {
			return {
				banners:[],
				recommends:[],
				goods:{
					pop:{page:0,list:[]},
					new:{page:0,list:[]},
					sell:{page:0,list:[]},
				},
				currentType:'pop',
				backTopShow:false,
				scrollTop:0,
				old:{
					scrollTop:0
				},
				isActive:false,
				tabcontrolTop:0,
			}
		},
		onReady(){
			this.getHomeMultidata()
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')
			this.getTabcontrolTop()
		},
		onLoad(){
		},
		computed:{
			...mapState({
				shoppingLength:state=>state.cartList.length
			}),
			goodslistdata(){
				return this.goods[this.currentType].list
			}
		},
		methods:{
			scrollBottom(){
				console.log('到底部啦')
				this.getHomeGoods(this.currentType)
			},
			getTabcontrolTop(){
			    const query = uni.createSelectorQuery().in(this);
			    query.select('#test').boundingClientRect(data => {
					this.tabcontrolTop=data.top
			    }).exec();  
			},
			scrollY(e){
				this.backTopShow=e.detail.scrollTop>=200
				this.old.scrollTop=e.detail.scrollTop
				this.isActive=e.detail.scrollTop>=(this.tabcontrolTop+30)
				// console.log(this.$refs.tabcontrol.currentIndex)
			},
			goTop(e){
				this.scrollTop=this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			tabClick(index){
				switch(index){
					case 0:
						this.currentType='pop'
					break
					case 1:
						this.currentType='new'
					break
					case 2:
						this.currentType='sell'
					break
				}
			},
			getHomeMultidata(){
				uni.request({
					url:'http://123.207.32.32:7888/api/hy66/home/multidata',
					success:(res)=>{
						this.banners=res.data.data.banner.list
						this.recommends=res.data.data.recommend.list
					}
				})
			},
			getHomeGoods(type){
				const page=this.goods[type].page+1
				uni.request({
					url:'http://123.207.32.32:7888/api/hy66/home/data',
					data:{
						type:type,
						page:page
					},
					success:(res)=>{
						this.goods[type].list.push(...res.data.data.list)
					}
				})
				this.goods[type].page+=1
			}
		}
	}
</script>

<style scoped>
	.scrollview{
		height: 1046rpx;
	}
	.title {
		font-size: 36rpx;
		color: red;
		font-weight: bolder;
	}
	.navbar{
		background: pink;
	}
	.tit{
		line-height: 88rpx;
		height: 88rpx;
		color:white;
		font-weight: bold;
	}
	.tabcontrol{
		background-color: white;
	}
</style>
